<template>
	<view class="opt-item">
			<navigator :url="`/pages/detail/detail?id=${topicItem.id}`" class="opt-item-link">
					<view class="box">
						<view class="left">
							<image :src="topicItem.src" class="img"></image>
							<text class="txt">{{topicItem.name}}</text>
						</view>
						<view class="right">
							共<text class="txt">{{topicItem.total}}</text>题
						</view>
					</view>
			</navigator>
	</view>
</template>

<script>
	export default {
		name:"my-list-item",
		props: {
			topicItem: {
				type: Object
			}
		},
		watch: {
			// topicItem:{
			// 	deep: true,// 深度侦听  布尔值设置true 
			// 	immediate: true,
			// 	handler: function(){
			// 		// ....
			// 	}
			// }
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
@import "../../uni.scss";
.opt-item {
	width: 100%;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
	.opt-item-link {
		display: block;
		width: 100%;
		height: 140rpx;
		.box {
			width: 100%;
			height: 140rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 8rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			box-shadow: 0 0px 2px $box-shadow-color;
			// background-image: linear-gradient(to bottom, white, #007aff);
			.left {
				.img {
					width: 90rpx;
					height: 90rpx;
					vertical-align: middle;
				}
				.txt {
					vertical-align: middle;
					margin: 0 20rpx;
					color: #666;
					font-size: 28rpx;
				}
			}
			.right {
				font-size: 28rpx;
				.txt {
					font-family: Helvetica, Arial, sans-serif;
					vertical-align: middle;
					color: #333;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
}
</style>